@extends("admin.layout.main")

@section("content")
    <div id="app">

        {{--粉丝备注--}}
        <Modal v-model="fansModal" title="备注粉丝" width="360" @on-ok="storeMarkFans">
        <span>
                昵称:
                  <i-input v-model="fans.nickname" long></i-input>
            </span>
        <span>
                手机号:
                  <i-input v-model="fans.phone" disabled long></i-input>
            </span>
        </Modal>

        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">



                <span>
                    &nbsp&nbsp&nbsp开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 100px"
                    @on-change="dateStartFormat">
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 100px"
                    @on-change="dateEndFormat">
                    </date-picker>
                </span>


                <span>
                    订单号:
                     <i-input v-model="order_id" style="width:100px"></i-input>
                </span>

                <span>
                    电话:
                     <i-input v-model="phone" style="width:100px"></i-input>
                </span>

                <span>
                    收货人:
                     <i-input v-model="post_recevier" style="width:100px"></i-input>
                </span>

                <span>
                    店铺:
                     <i-input v-model="shop_name" style="width:100px"></i-input>
                </span>

                <span>
                    主播:
                     <i-input v-model="liver" style="width:100px"></i-input>
                </span>

                <span style="padding-left: 10px">
                      <i-button type="primary" @click="orderList">查询</i-button>
                </span>

                <span style="padding-left: 10px">
                      导入：
                </span>

                <span style="padding-left: 10px">
                      <i-select style="width: 100px;" v-model="data.liver">
                            <i-option value="沈立妙">沈立妙</i-option>
                            <i-option value="范丽斌">范丽斌</i-option>
                            <i-option value="林秋华">林秋华</i-option>
                            <i-option value="林双">林双</i-option>
                            <i-option value="郑梅娟">郑梅娟</i-option>
                      </i-select>
                </span>

                <span style="width: 100px;display: inline-block">
                     <Upload action="/admin/order/taobao/import" :data="data"  :on-success="onSucc"  :show-upload-list="showUpList" :before-upload="handleUpload">
                        <i-button icon="ios-cloud-upload-outline">导入订单</i-button>
                    </Upload>
                </span>

                <span style="padding-left: 10px">
                       <a :href="combine_link" style="display: inline-block;margin-left: 15px;">订单下载</a>
                </span>

            </i-col>
            <i-col span="35" style="width: 70% ;margin:20px 0 0 30px">
                <Card>
                    <span  style="display:inline-block;width: 200px">应付金额：@{{ total_amount }}</span>
                    <span  style="display:inline-block;width: 140px">支付积分：@{{ payment_integral }}</span>
                    <span  style="display:inline-block;width: 200px">实际支付金额：@{{ actual_payment_amount }}</span>
                    <span  style="display:inline-block;width: 140px">实际支付积分：@{{ actual_payment_integral }}</span>
                </Card>
            </i-col>



        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table ref="selection" :data="tableData" height="800" border :columns="tableColumns" stripe
                         style="width: 100% !important;">
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="orderList">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    data:{
                        token : '',
                        liver:''
                    },
                    token:'',
                    tableData: [],
                    tableColumns: [
                        {
                            title: '订单号',
                            width: '150',
                            key:'order_id'
                        },
                        {
                            title: '主播',
                            width: '150',
                            key:'liver'
                        },
                        {
                            title: '会员名',
                            key: 'buyer_nickname',
                            width: '150',
                            render: (h, params) => {
                                let name = '会员名：'+params.row.buyer_nickname+' 支付宝：'+params.row.buyer_zfb;
                                return h('div', [
                                    name
                                ]);
                            }
                        },
                        {
                            title:'产品名',
                            key:'prod_name',
                            width: '150',
                            render: (h, params) => {
                                return h('Tooltip', {
                                    props: {
                                        placement: 'top'
                                    }
                                }, [
                                    params.row.prod_name,
                                    h('span', {
                                        slot: 'content',             //slot属性
                                        style: {
                                            whiteSpace: 'normal',
                                            wordBreak: 'break-all'
                                        }
                                    }, params.row.prod_name)
                                ])
                            }
                        },
                        {
                            title: '实际支付金额',
                            key:'actual_payment_amount',
                            width: '100',
                        },
                        {
                            title: '店铺',
                            key:'shop_name',
                            width: '150',
                        },
                        {
                            title: '状态',
                            key:'order_status',
                            width: '150',
                        },
                        {
                            title:'收货人',
                            key:'post_recevier',
                            width: '100',
                        },
                        {
                            title:'电话',
                            key:'post_tel',
                            width: '150',
                        },
                        {
                            title:'地址',
                            key:'post_address',
                            width: '200',
                        },
                        {
                            title:'头条昵称',
                            key:'nickname',
                            width: '200',
                            render:(h,params) => {
                                let nickname = params.row.nickname;

                                if(nickname != '未知'){
                                    return h('div',{
                                        style:{
                                            'color':'green',
                                            'font-size':'12px'
                                        },
                                        on: {
                                            click: () => {
                                                this.markFans(params.row)
                                            }
                                        }
                                    },nickname);
                                }else{
                                    return h('Button',{
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {
                                                this.markFans(params.row)
                                            }
                                        }
                                    },'备注');
                                }

                            }
                        },
                        {
                            title: '创建时间',
                            key:'create_time',
                            width: '200',
                        },
                        {
                            title: '支付时间',
                            key:'payment_time',
                            width: '200',
                        },
                        {
                            title: '导入时间',
                            key:'created_at',
                            width: '200',
                        },
                        {
                            title:'宝贝种类',
                            key:'prod_type',
                            width: '100',
                        },
                        {
                            title:'修改后地址',
                            key:'modify_address',
                            width: '200',
                        },
                        {
                            title:'快递',
                            key:'logistics_code',
                            width: '200',
                            render: (h, params) => {
                                let name = '';
                                name = params.row.logistics_comp+'--'+params.row.logistics_code;
                                return h('div', [
                                    name
                                ]);
                            }
                        },
                        {
                            title: '总数',
                            key:'prod_total_amount',
                            width: '100',
                        },
                        {
                            title: '是否手机下单',
                            key:'order_type',
                            width: '200',
                        },
                        {
                            title: '关闭原因',
                            key:'cancel_reason',
                            width: '200',
                        },
                        {
                            title: '支付详情',
                            key:'payment_detail',
                            width: '200',
                        },
                        {
                            title: '应付金额',
                            key:'payment_amount',
                            width: '100',
                        },
                        {
                            title: '邮费',
                            key:'feight_payment_amount',
                            width: '100',
                        },
                        {
                            title: '支付积分',
                            key:'payment_integral',
                            width: '100',
                        },
                        {
                            title: '总金额',
                            key:'total_amount',
                            width: '100',
                        },
                        {
                            title: '返点积分',
                            key:'return_integral',
                            width: '100',
                        },
                        {
                            title: '实际支付积分',
                            key:'actual_payment_integral',
                            width: '100',
                        },
                        {
                            title: '备注',
                            key:'remark',
                            width: '200',
                        },
                        {
                            title: '留言',
                            key:'buyer_words',
                            width: '200',
                        },
                        {
                            title: '配送方式',
                            key:'delivery_mode',
                            width: '100',
                        },

                    ],
                    spinShow:false,
                    order_id:'',
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    defaultStartTime:'',
                    defaultEndTime:'',
                    total_amount:'',
                    payment_integral:'',
                    actual_payment_amount:'',
                    actual_payment_integral:'',
                    phone:'',
                    post_recevier:'',
                    shop_name:'',
                    liver:'',
                    showUpList:false,
                    fansModal:false,
                    fans:{
                        nickname:'',
                        phone:''
                    },
                }
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.data.token = this.token;
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                onSucc(response){
                    if(response.code == 200){
                        this.orderList(1);
                        this.$Message.info('上传成功');
                    }else{
                        this.$Message.info(response.msg);
                        return;
                    }


                },
                handleUpload(response){
                    if(this.data.liver == ''){
                        this.$Message.warning('请选择主播');
                        return false;
                    }
                    this.$Message.warning('正在上传，请等待。。。');
                    return true;
                },
                searchList(){   //搜索
                    this.orderList(1);
                },
                dateStartFormat(f,v){
                    this.defaultStartTime = f;
                },
                dateEndFormat(f,v){
                    this.defaultEndTime = f;
                },
                //获取几天前时间日期
                getValidDate(dayCount = 1){
                    curDate = new Date();
                    var preDate = new Date(curDate.getTime() - dayCount*24*60*60*1000);
                    var year = preDate.getFullYear();
                    var month = preDate.getMonth()+1;
                    if(month < 10){
                        month = '0'+ month;
                    }
                    var day = preDate.getDate();
                    if(day < 10){
                        day = '0'+ day;
                    }
                    var time = year + '-' + month + '-' + day;
                    return time;
                },
                getHourDate(hourCount){  //  前几个小时的时间
                    let curDate = new Date();
                    let preDate = new Date(curDate.getTime());
                    h = preDate.getHours()-hourCount;// 小时
                    m = preDate.getMinutes(); // 分
                    s = preDate.getSeconds(); // 秒

                    if(h < 10){
                        h = '0'+h;
                    }
                    if(m < 10){
                        m = '0'+m;
                    }
                    if(s < 10){
                        s = '0'+s;
                    }

                    let time = this.getValidDate(0)+' '+h+':'+m+':'+s;
                    return time;

                },
                orderList(page = 1) {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/order/taobao/list",{
                        params: {
                            token:vm.token,
                            start_time: that.defaultStartTime,
                            end_time: that.defaultEndTime,
                            order_id:that.order_id,
                            page:page,
                            phone:that.phone,
                            shop_name:that.shop_name,
                            post_recevier:that.post_recevier,
                            liver:that.liver
                        }
                    })
                    .then(function (response) {
                        vm.tableData = response.data.result.list.data;
                        vm.page.total = response.data.result.list.total;
                        vm.page.current = response.data.result.list.current_page;
                        vm.page.pageSize = response.data.result.list.per_page;
                        vm.total_amount  =   response.data.result.data.total_amount;
                        vm.payment_integral  =   response.data.result.data.payment_integral;
                        vm.actual_payment_amount  =   response.data.result.data.actual_payment_amount;
                        vm.actual_payment_integral  =   response.data.result.data.actual_payment_integral;
                        that.spinShow = false;
                    });
                },
                markFans(row){ //粉丝备注
                    this.fansModal = true;
                    this.fans.phone = row.post_tel;
                    this.fans.nickname  =   '';
                    if(row.nickname != '未知'){
                        this.fans.nickname = row.nickname;
                    }
                },
                storeMarkFans(){    //保存粉丝备注
                    console.log(this.fans);
                    axios.get('https://fans.youdnr.com/api/fans/store_mark', {
                        params: {
                            nickname:this.fans.nickname,
                            phone:this.fans.phone
                        }
                    }).then((response) => {
                        vm.$Message.success('备注完成');
                        vm.orderList(vm.page.current);
                    });

                },
                batch() {
                    let ids = [];
                    this.$refs.selection.getSelection().map(item => {
                        ids.push(item.order_id);
                    });
                    return ids;
                },

            },
            computed: {
                combine_link() {
                    return '/admin/order/taobao/export?shop_name=' + this.shop_name + '&start_time=' + this.defaultStartTime +
                        '&end_time=' + this.defaultEndTime + '&order_id=' + this.order_id + '&post_tel=' + this.phone + '&token=' + this.token +
                        '&post_recevier=' + this.post_recevier;
                }

            }

        });

        vm.token = getToken();
        vm.orderList(1);

        $("body").addClass("sidebar-collapse");

    </script>

@endsection

